<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
Copyright (C) 2010 Karl Ostmo

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.


Author: Karl Ostmo
Date: November 1, 2010
Version: 1.0
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us" >
<head>

<title>f7u12v1.0: An interactive rage comic</title>

<style type="text/css">
body {font-family: sans-serif}
</style>

<script type="text/javascript" src="physics.js"></script>
<script type="text/javascript" src="arms.js"></script>

<script type="text/javascript">

function press_key(event) {
	switch(event.keyCode) {
	case 37:
		keys_pressed.left = true;
		break;
	case 38:
		keys_pressed.up = true;
		break;
	case 39:
		keys_pressed.right = true;
		break;
	case 40:
		keys_pressed.down = true;
		break;
	default:
		return true;
	}

	return false;
}


function validateTimestep(element) {

	if (element.value) {
		var parsed_value = parseFloat(element.value);
		if (parsed_value > 0) {
			// set global value
			timestep = parsed_value;
			return;
		}
	}

	element.value = timestep;
}


function click_down(object, event) {
	keys_pressed.first_click = true

	var click_button = event.button;

//	if (click_button != 0 && click_button != 1)	// Only accept left- and middle-clicks
	if (click_button != 0)	// Only accept left-clicks
		return;

//	which_click_button = click_button;
	which_click_button = event.ctrlKey ? 1 : 0;

	mouse_button_down = true;
	point(object, event);
}

function click_up(object, event) {
	mouse_button_down = false;
}

function point(object, event) {

	pos_x = event.offsetX?(event.offsetX):event.pageX-object.offsetLeft;
	pos_y = event.offsetY?(event.offsetY):event.pageY-object.offsetTop;

	ropeSimulations[which_click_button].last_click_pos = new Vector2D(pos_x, pos_y);
}

function drag(object, event) {
	if (mouse_button_down)
		point(object, event);
}


function chrome_detect() {
	var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
	if (!is_chrome)
		document.getElementById("browser_recommendation").style.display = "block";
}


</script>

</head>
<body onkeydown="return press_key(event);" onload="chrome_detect(); sceneInit()">

<div id="browser_recommendation" style="display: none; font-weight: bold">IMPORTANT: <a href="http://www.google.com/chrome">Google Chrome</a> is recommended for viewing this page. Firefox doesn't handle it very well.
<hr /></div>

<p>Move with the arrow keys. Click and CTRL+click independently change arm gravity.</p>

<h1>
Trolls: <span style="color: red" id="strikes_score_field">0</span>
</h1>

<h1>
f7u12's: <span style="color: red" id="matches_score_field">0</span>
</h1>



<canvas id="canvas" width="800" height="600"
	onmousedown="click_down(this, event)"
	onmouseup="click_up(this, event)"
	onmousemove="drag(this, event)"
	style="cursor: crosshair;">Your browser does not support HTML5 Canvas.</canvas>

<form name="user_controls">
<input type="checkbox" id="sound_enabled_button" /><label for="sound_enabled_button"> Sound</label>
</form>


<form style="display: block">
Quadrant: <span id="quadrant_counter_field"></span><br/>

<label for="timestep_field">Simulation timestep (seconds): </label><input type="text" maxlength="5" id="timestep_field" value="0.005" onblur="validateTimestep(this);"/> (Simulation will explode if this is too high)

<br />
Speed <input type="text" maxlength="10" id="speed_field" value="0" />
<br />
Tip distance <input type="text" maxlength="10" id="distance_field" value="0" />
<br />
Threshold distance <input type="text" maxlength="10" id="threshold_field" value="0" />
</form>

[<a href="info.html">more info</a>]
</body>
</html>
